<!--借车页面 -->
<template>
  <div>
    <!-- 未借车状态 -->
    <div v-if="this.$store.getters.userData.borrowStatus==0">
      <!-- 微信浏览器下，扫码借车 -->
      <div v-if="is_Wechat()==true">
        <mt-button class="borrow-btn" type="primary" @click="ScanQR()">扫描车桩</mt-button>
        <br />
        <mt-button
          class="borrow-btn2"
          v-if="this.scansult!=''"
          type="primary"
          @click="borrowbikeclick(scansult)"
        >取车</mt-button>
        <div class="text-btn" v-if="get_Scanresult()==1">已获取停车桩编号,点击取车</div>
      </div>
      <!-- 其他，输入车桩号借车 -->
      <div v-if="is_Wechat()==false">
        <mt-button class="borrow-btn" type="primary" @click="pileinputpop=true">输入车桩编号</mt-button>
        <br />
        <mt-button
          class="borrow-btn2"
          v-if="this.scansult!=''"
          type="primary"
          @click="borrowbikeclick(scansult)"
        >取车</mt-button>
        <div class="text-btn" v-if="this.scansult!=''">已获取停车桩编号,点击取车</div>
      </div>
      <div class="text-btn" @click="howborrow=true">如何借车</div>

      <div v-show="this.scansult!=''">测试：{{scansult}}</div>
    </div>
    <!-- 已借车状态 -->
    <div v-if="this.$store.getters.userData.borrowStatus==1">
      <img src="../../assets/logo.jpg" width="150" height="150" style="margin-top:50px;" />
      <div class="borrow-text" style="margin-top:50px;">您已借车！</div>
      <div class="borrow-text" style="margin-top:0;">请正常使用单车</div>
      <div class="borrow-text" style="margin-top:0;">切勿损坏单车</div>
    </div>

    <!-- 我的信息 -->
    <mt-popup v-model="pileinputpop" position="right">
      <div class="pop">
        <div class="pop-text">
          <mt-field
            class="login-input"
            label
            type="text"
            placeholder="车桩代号(不能为空)，如：MA1"
            v-model="pile1"
          ></mt-field>
          <mt-field
            class="login-input"
            label
            type="text"
            placeholder="车桩序号(不能为空)，如：11"
            v-model="pile2"
          ></mt-field>
        </div>
        <mt-button
          type="danger"
          size="small"
          @click.native="pileinputpop=false"
          style="margin-top:20px;margin-right:50px;"
        >关闭</mt-button>
        <mt-button
          type="primary"
          size="small"
          @click.native="get_inputresult(pile1,pile2)"
          style="margin-top:20px;"
        >确定</mt-button>
      </div>
    </mt-popup>
    <!-- 如何借车 -->
    <mt-popup v-model="howborrow" position="right">
      <div class="pop">
        <div class="pop-text" v-if="is_Wechat()==true">
          1.扫描车桩二维码
          <br />2.提示已经获取车桩编号
          <br />3.点击取车
          <br />4.成功取车

        </div>
        <div class="pop-text" v-if="is_Wechat()==false">
          1.输入车桩编号，确定
          <br />2.提示已经获取车桩编号
          <br />3.点击取车
          <br />4.成功取车
        </div>
        <mt-button
          type="primary"
          size="small"
          @click.native="howborrow=false"
          style="margin-top:20px;"
        >关闭</mt-button>
      </div>
    </mt-popup>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
import { borrowbike } from "../../api/bike";
export default {
  data() {
    return {
      Revalue: true,
      pilenum: "",
      scansult: "", //获取到的车桩编号
      pile1: "",
      pile2: "",
      pileinputpop: false,
      storeuser: true,
      howborrow:false
    };
  },
  methods: {
    //判断当前是什么浏览器
    is_Wechat() {
      var ua = navigator.userAgent.toLowerCase();
      var isWeixin = ua.indexOf("micromessenger") != -1;
      if (isWeixin) {
        return true;
      } else {
        return false;
      }
    },
    // 微信浏览器下
    ScanQR() {
      window.location.href = "http://sao315.com/w/api/saoyisao";
    },
    get_Scanresult() {
      if (location.href.indexOf("qrresult=") > -1) {
        var pilenum = location.href.split("qrresult=")[1];
        this.scansult = pilenum.slice(0, 3) + "+" + pilenum.slice(3);
        return 1;
      } else return 0;
    },
    //一般浏览器下
    get_inputresult(val1, val2) {
      if (val1 == "" || val2 == "") {
        Toast({
          message: "车桩代号和车桩序号都不能为空",
          position: "bottom",
          duration: 500
        });
      } else if (val1 != "" && val2 != "") {
        this.scansult = val1 + "+" + val2;
        this.pileinputpop = false;
        return 1;
      }
      return 0;
    },
    //取车函数
    borrowbikeclick(scansult) {
      let pileNum = scansult;
      console.log(pileNum);
      this.get_bicycle(pileNum);
    },
    //请求单车
    get_bicycle(pileNum) {
      borrowbike(pileNum)
        .then(res => {
          if (res.code == 1) {
            //借车成功时
            console.log(res);
            let Bbike = {
              borrowStatus: 1,
              bicycleNum: res.data.bicycleNum
            };
            this.$store.commit("user/BIKE_CHANGE", Bbike);
          }
        })
        .catch(err => {
          console.log(err);
          Toast({
          message: err.msg,
          position: "middle",
          duration: 1000
        });
        });
    }
  }
};
</script>
<style  scoped>
.borrow-btn {
  width: 40%;
  margin-top: 400px;
  clear: both;
}
.borrow-btn2 {
  margin-top: 50px;
  width: 40%;
}
.pile-input {
  width: 60%;
  margin-top: 50px;
  margin-left: 20%;
  margin-bottom: 50px;
  border: #444444;
}

.text-btn {
  color: #0b8ff5;
  margin-top: 60px;
  font-size: 30px;
  text-align: center;
  cursor: pointer;
  /* width: 50%; */
}
.borrow-text {
  color: #0b8ff5;
  margin-top: 400px;
  font-size: 50px;
  text-align: center;
  /* width: 50%; */
}
.borrow-text2 {
  color: #0b8ff5;
  margin-top: 50px;
  font-size: 30px;
  text-align: center;
}
/* 弹窗样式 */
.pop {
  background-color: white;
  padding: 30px;
  /* height: 100%; */
  width: 100vw;
  /* font-size: 50px; */
}
.pop-text {
  font-size: 50px;
  text-align: start;
}
</style>